<template>
  <!-- 注意，使用 autoResize 配置时，需要在画布容器外面再套一层宽高都是 100% 的外层容器，在外层容器上监听尺寸改变，当外层容器大小改变时，画布自动重新计算宽高以及元素位置。 -->
  <div style="width:100%; height:100%">
    <div id="container"></div>
  </div>
</template>
<script>
import {Graph} from "@antv/x6";

const data = {
  // 节点
  nodes: [
    {
      id: 'node1', // String，可选，节点的唯一标识
      shape:'rect',
      x: 40,       // Number，必选，节点位置的 x 值
      y: 40,       // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'hello', // String，节点标签
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
    {
      id: 'node2', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'world', // String，节点标签
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
  ],
  // 边
  edges: [
    {
      shape: 'edge',
      source: 'node1', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
      label: 'x6',
      attrs: {
        // line 是选择器名称，选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}

export default {
  name: "antvx6-flow",
  mounted () {
    this.init();
  },
  methods: {
    init(){
      //画布配置文档 https://x6.antv.antgroup.com/api/graph/graph
      const graph = new Graph({
        container: document.getElementById('container'),//画布的容器
        //画布大小 如果不设置，就会以画布容器大小初始化画布。
        width: 800,//画布宽度，默认使用容器宽度。
        height: 600,//画布高度，默认使用容器高度

        // 背景配置文档 https://x6.antv.antgroup.com/api/graph/background
        background: {//画布背景色
          color: '#F2F7FA',
        },

        // 网格配置文档 https://x6.antv.antgroup.com/api/graph/grid
        grid: {// 背景网格 网格，默认使用 10px 的网格，但不绘制网格背景。
          visible: true,
          type: 'doubleMesh',
          args: [
            {
              color: '#eee', // 主网格线颜色
              thickness: 1, // 主网格线宽度
            },
            {
              color: '#ddd', // 次网格线颜色
              thickness: 1, // 次网格线宽度
              factor: 4, // 主次网格线间隔
            },
          ],
        },

        autoResize: true,//是否监听容器大小改变，并自动更新画布大小。
        scaling:{min: 0.01, max: 16},//画布的最小最大缩放级别
        panning:true,//画布是否可以拖拽平移，默认禁用
        mousewheel:true,//鼠标滚轮缩放，默认禁用
      });


      graph.fromJSON(data)// 使用json数据渲染画布数据
      graph.centerContent() // 居中显示

      // graph.zoom(0.2); // 画布缩放
      // graph.zoomTo(1); // 画布缩放到
      // graph.zoomToFit({ maxScale: 2, padding: 20 }); // 撑满画布, maxScale 配置最大缩放级别, padding 配置内边距
      // graph.toJSON(); // 将节点/边的结构化数据转换为 JSON 数据

      // graph.undo(); // 撤销
      // graph.redo(); // 重做

      // graph.exportSVG(fileName, options); // 导出svg
      // 经实测发现exportSVG仅会导出可见部分画布, 所以导出前可能需要将画布缩放到全部可见: graph.zoomToFit()

      // graph.exportPNG(fileName, options); // 导出png
      // graph.exportJPEG(fileName, options); // 导出jpg


    }
  }
}
</script>
<style scoped lang="scss">

</style>